<template>
    <div class="w750 white-bg">
        <!-- 常见问题 -->
        <div class="question">
            <div class="item" v-for="(item, index) in questionType" :key="index" :class="{ cur: questionObject.currIndex == index && questionObject.isActive }">
                <div class="entry-con-tit" @click="toggleSelect(item.newsCategoryId, index)">
                    <div class="entry-con">
                        <div class="con-box">
                            <div class="fl">
                                <span class="entry-name">{{ item.newsCategoryName }}</span>
                            </div>
                            <div class="fr">
                                <em class="arr"><img src="../../assets/images/arrow.png" alt="" /></em>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="entry-con-select">
                    <template v-if="item.questionSelect && item.questionSelect.length">
                        <div class="entry-con" v-for="(item1, index1) in item.questionSelect" :key="index1" @click="toQuestionDetail(item1.newsId)">
                            <div class="con-box">
                                <div class="fl">
                                    <span class="entry-name">{{ item1.newsTitle }}</span>
                                </div>
                                <div class="fr">
                                    <em class="arr"><img src="../../assets/images/arrow.png" alt="" /></em>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="entry-con" v-else>该问题栏目下没有问题列表哦~</div>
                </div>
            </div>
        </div>
        <!-- /常见问题 -->
    </div>
</template>

<script>
import { questionApi } from 'api/question';
export default {
    data() {
        return {
            questionType: [], //问题类型
            photoServer: this.$imgUrlHead, //图片
            questionObject: {
                currIndex: 0,
                isActive: false
            }
        };
    },
    mounted() {
        let that = this;

        //常见问题
        questionApi.question().then(res => {
            if (res.status == 1) {
                this.questionType = res.result.resultList;
            } else {
                this.$toast({ duration: 1000, message: res.msg });
            }
        }),
            () => {
                this.$toast({ duration: 1000, message: '获取数据失败' });
            };
    },
    //离开页面,恢复初始状态
    deactivated() {
        this.questionObject.currIndex = 0;
        this.questionObject.isActive = false;
    },
    methods: {
        /**
         * 展开或收起问题下拉列表
         * @param newsCategoryId 问题栏目ID
         * @param index 当前栏目索引
         */
        toggleSelect(newsCategoryId, index) {
            //说明点击了另一个问题类型且当前已有一个问题类型被展开
            if (this.questionObject.currIndex != index && this.questionObject.isActive) {
                //则先要把当前展开关掉, isActive要设为false
                this.questionObject.isActive = false;
            }

            this.questionObject.currIndex = index;

            //如果已有数据, 则不需要再请求接口了, 直接展开或隐藏即可
            if (this.questionType[index].questionSelect) {
                this.questionObject.isActive = !this.questionObject.isActive;
                return;
            }

            //请求问题下拉列表
            questionApi
                .questionList({ newsCategoryId: newsCategoryId })
                .then(res => {
                    if (res.status == 1) {
                        if (res.result.resultList) {
                            this.questionType[index].questionSelect = res.result.resultList;
                        } else {
                            this.questionType[index].questionSelect = [];
                        }
                    } else {
                        this.$toast(res.msg);
                    }
                })
                .finally(e => {
                    this.questionObject.isActive = !this.questionObject.isActive;
                });
        },

        /**
         * 跳转问题文章详情页面
         * @param id 问题文章ID
         */
        toQuestionDetail(newsId) {
            this.$router.push({
                path: `/questionDetail`,
                query: {
                    newsId: newsId
                }
            });
        }
    }
};
</script>

<style src="../../assets/css/question.css" scoped></style>